@import 'common';

@mixin supspent($content: '正佳店') {
    content: $content;
    display: inline-block;
    text-align: center;
    line-height: 5.2vw;
    width: 23.6vw;
    height: 5.2vw;
    font-size: 3.2vw;
    background-color: #ffffff;
    opacity: 0.67;
    position: absolute;
    top: 50%;

}

.web {
    
    //内容
    main {
       

        img {

            width: 94vw;
            height: 34.6667vw;
            display: block;
            margin: 0 auto;

        }

        .product {

            width: 88.5333vw;
            margin: 0 auto;


            .pice {
                margin-top: 4.8vw;
                margin-bottom: 4.8vw;

                h3 {
                    width: 100%;
                    font-size: 9.6vw;
                    line-height: 6.1333vw;
                    color: #ff9344;
                    margin-bottom: 6.4vw;

                    button {
                        float: right;
                        width: 14.8vw;
                        height: 7.8667vw;
                        background-color: #ff9344;
                        border-radius: 2.6667vw;
                        border: solid .2667vw #ff9344;
                        color: white;
                        font-size: 4vw;
                    }
                }

                .txt {
                    display: flex;
                    justify-content: space-between;

                    .left {
                        display: flex;

                        img {
                            width: 5.0667vw;
                            height: 4.8vw;
                            margin-right: 1.7333vw;
                        }

                        p {
                            font-size: 4vw;

                            span {
                                color: #ff9344;
                            }
                        }
                    }

                    .right {
                        font-size: 3.4667vw;
                        color: #8e8e8e;
                    }
                }
            }

            ul {
                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 1.3333vw;

                    &:first-child {
                        justify-content: space-between;
                        color: #ffffff;
                        background-color: #ff9344;
                        width: 100%;
                        height: 8.9333vw;
                        line-height: 8.9333vw;
                        background-color: #ff9344;
                        box-sizing: border-box;
                        padding: 0 1.3333vw;

                        span {
                            &:first-child {
                                font-size: 4vw;
                            }
                        }
                    }

                    .img {
                        margin: 0;
                        width: 23.6vw;
                        height: 23.4667vw;
                        background-color: #cdcdcd;
                        display: inline-block;
                        position: relative;

                        img {
                            width: 23.6vw;
                            height: 23.4667vw;
                        }
                    }
                    &:nth-child(2) .img::before {
                        @include supspent();
                    }
                    &:nth-child(3) .img::before {
                        @include supspent('体育西店');
                    }
                    &:nth-child(4) .img::before {
                        @include supspent('昌岗店');
                    }
                    

                    .txt {
                        width: 44.266vw;

                        h3 {
                            font-size: 4vw;
                        }

                        p {
                            display: inline-block;
                            width: 55%;
                            height: 4.5333vw;
                            background: url(../img/detail/collect.png);
                            background-size: 4.8vw 4.5333vw;
                            vertical-align: middle;
                        }

                        span {
                            font-size: 3.2vw;
                            color: #929292;

                        }

                        a {
                            text-decoration: none;
                            font-size: 2.6667vw;
                            color: #ff9344;
                        }
                    }

                    button {
                        width: 14.8vw;
                        height: 7.8667vw;
                        background-color: #ff9344;
                        border-radius: 2.6667vw;
                        border: solid .2667vw #ff9344;
                        color: #ffffff;
                        font-size: 4vw;
                    }
                }
            }

        }

    }

}